<template >
  <div class="modal-w">
    <div class="head">
      <div class="headitem left">
        <div class="titleinfo">
          <div class="title">常态体征</div>
          <div class="value">128</div>
          <div class="unit">项</div>
        </div>
      </div>
      <div class="headitem right">
        <div class="titleinfo">
          <div class="title">体征发现</div>
          <div class="value">2065</div>
          <div class="unit">条</div>
        </div>
      </div>
    </div>
        <div class="content">
      <div class="left">
        <div class="left-l">
          <div class="iconcontent">
            <!-- 74 * 84 总宽度84 -->
            <div class="menuicon menuicon1" @click="selectMenu('chengshizhisheng')">
              <img
                src="@/assets/icon11.png"
                class="base"
                alt="icon"
                v-if="menuitem != 'chengshizhisheng'"
              />
              <img
                src="@/assets/icon12.png"
                class="base"
                alt="icon"
                v-if="menuitem == 'chengshizhisheng'"
              />
              <img src="@/assets/icon8.png" class="iconx" alt="icon" />
              <img
                src="@/assets/arrow_left.png"
                class="arrow-left"
                alt="icon"
                v-if="menuitem == 'chengshizhisheng'"
              />
              <img
                src="@/assets/arrow_right.png"
                class="arrow-right"
                alt="icon"
                v-if="menuitem == 'chengshizhisheng'"
              />
              <div class="menuicontitle">城市之声</div>
            </div>
            <div class="menuicon menuicon2" @click="selectMenu('chengshizhigan')">
              <img
                src="@/assets/icon11.png"
                class="base"
                alt="icon"
                v-if="menuitem != 'chengshizhigan'"
              />
              <img
                src="@/assets/icon12.png"
                class="base"
                alt="icon"
                v-if="menuitem == 'chengshizhigan'"
              />
              <img src="@/assets/icon6.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市之感</div>
              <img
                src="@/assets/arrow_left.png"
                class="arrow-left"
                alt="icon"
                v-if="menuitem == 'chengshizhigan'"
              />
              <img
                src="@/assets/arrow_right.png"
                class="arrow-right"
                alt="icon"
                v-if="menuitem == 'chengshizhigan'"
              />
            </div>
            <div class="menuicon menuicon5" @click="selectMenu('chengshizhiyan')">
              <img
                      src="@/assets/icon11.png"
                      class="base"
                      alt="icon"
                      v-if="menuitem != 'chengshizhiyan'"
              />
              <img
                      src="@/assets/icon12.png"
                      class="base"
                      alt="icon"
                      v-if="menuitem == 'chengshizhiyan'"
              />
              <img src="@/assets/icon10.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市之眼</div>
              <img
                      src="@/assets/arrow_left.png"
                      class="arrow-left"
                      alt="icon"
                      v-if="menuitem == 'chengshizhiyan'"
              />
              <img
                      src="@/assets/arrow_right.png"
                      class="arrow-right"
                      alt="icon"
                      v-if="menuitem == 'chengshizhiyan'"
              />
            </div>
            <div class="menuicon menuicon3" @click="selectMenu('chengshihuxi')">
              <img
                src="@/assets/icon11.png"
                class="base"
                alt="icon"
                v-if="menuitem != 'chengshihuxi'"
              />
              <img
                src="@/assets/icon12.png"
                class="base"
                alt="icon"
                v-if="menuitem == 'chengshihuxi'"
              />
              <img src="@/assets/icon2.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市呼吸</div>
              <img
                src="@/assets/arrow_left.png"
                class="arrow-left"
                alt="icon"
                v-if="menuitem == 'chengshihuxi'"
              />
              <img
                src="@/assets/arrow_right.png"
                class="arrow-right"
                alt="icon"
                v-if="menuitem == 'chengshihuxi'"
              />
            </div>
            <div class="menuicon menuicon3" @click="selectMenu('chengshiwendu')">
              <img
                      src="@/assets/icon11.png"
                      class="base"
                      alt="icon"
                      v-if="menuitem != 'chengshiwendu'"
              />
              <img
                      src="@/assets/icon12.png"
                      class="base"
                      alt="icon"
                      v-if="menuitem == 'chengshiwendu'"
              />
              <img src="@/assets/wendu.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市温度</div>
              <img
                      src="@/assets/arrow_left.png"
                      class="arrow-left"
                      alt="icon"
                      v-if="menuitem == 'chengshiwendu'"
              />
              <img
                      src="@/assets/arrow_right.png"
                      class="arrow-right"
                      alt="icon"
                      v-if="menuitem == 'chengshiwendu'"
              />
            </div>
            <div class="menuicon menuicon4" @click="selectMenu('chengshimaibo')">
              <img
                src="@/assets/icon11.png"
                class="base"
                alt="icon"
                v-if="menuitem != 'chengshimaibo'"
              />
              <img
                src="@/assets/icon12.png"
                class="base"
                alt="icon"
                v-if="menuitem == 'chengshimaibo'"
              />
              <img src="@/assets/icon4.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市脉搏</div>
              <img
                src="@/assets/arrow_left.png"
                class="arrow-left"
                alt="icon"
                v-if="menuitem == 'chengshimaibo'"
              />
              <img
                src="@/assets/arrow_right.png"
                class="arrow-right"
                alt="icon"
                v-if="menuitem == 'chengshimaibo'"
              />
            </div>
          </div>
        </div>
        <div class="left-r">
          <slot name="changtai" :menuitem="menuitem"></slot>
        </div>
      </div>
      <div class="right">
        <div class="right-t">
          <slot name="pie"></slot>
        </div>
        <div class="right-b">
          <slot name="form"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import pie from '@/components/pie.vue'
import forms from "./forms.vue";
import { ref, reactive } from 'vue';
export default {

  components: {
    pie,
    forms
  },
  setup(props) {
    let dataitems = reactive([
      {
        name: '智联',
        value: 207,
        unit: '条'
      },
      {
        name: '主动',
        value: 1657,
        unit: '条'
      },
      {
        name: '被动',
        value: 201,
        unit: '条'
      },
    ])
    //事件列表
    const fromsData = [
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'垃圾外溢', address:'怒江路 30弄42号 星风花苑',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'垃圾外溢',address:'	怒江路 30弄6号 星风花苑',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄38号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄38号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
      { time: '2021/5/16',	text:'住宅小区登高面违停监测报警', address:'中星花苑640号登高位',	state:'6',type:'智联'},
      {time: '2021/5/16',	text:'住宅小区消防通道违停监测报警', address:'绿杉小区7号右旁消防通道',state:'6',type:'智联'},
      {time: '2021/5/16',	text:'住宅小区消防通道违停监测报警', address:'绿洲湖畔花园3号消防通道',state:'6',type:'智联'}, 
      {time: '2021/5/16',	text:'住宅楼道火灾烟雾监测报警', 	address:'镇坪路176弄8号楼14F-1',state:'6',type:'智联'},
      {time: '2021/5/16',	text:'住宅小区登高面违停监测报警', address:'平江盛世家园1栋登高面',	state:'6',type:'智联'},
      {time: '2021/5/16',	text:'其他', address:'普陀区真华路399弄',	state:'3',type:'被动'},
      {time: '2021/5/16',	text:'住宅小区登高面违停监测报警', address:'象源丽都46#消防登高面',state:'4',type:'智联'},
      {time: '2021/5/16',	text:'民防地下空间水浸监测报警', 	address:'旋丰小区车站新村39号楼-2',	state:'4',type:'智联'},
      {time: '2021/5/16',	text:'群租治理', address:'普陀区竹柳路50弄锦竹苑13号',	state:'3',type:'被动'},
      {time: '2021/5/16',	text:'民防地下空间水浸监测报警', 	address:'管弄路226弄03号B1F-3',state:'4',type:'智联'},
      {time: '2021/5/16',	text:'民防地下空间水浸监测报警', 	address:'管弄路121弄01号B1F',state:'4',type:'智联'},
      {time: '2021/5/16',	text:'住宅小区消防通道违停监测报警', address:'北石路174弄小区北石路105号左旁消防通道',state:'4',type:'智联'},
      {time: '2021/5/16',	text:'入学入园', address:'普陀区白玉路98弄13号 江南名庐',	state:'8',type:'被动'},
      {time: '2021/5/16',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
      {time: '2021/5/16',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
      {time: '2021/5/16',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
      {time: '2021/5/16',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
      {time: '2021/5/16',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
      {time: '2021/5/16',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
      {time: '2021/5/16',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
      {time: '2021/5/16',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'被动'},
      {time: '2021/5/16',	text:'住宅小区消防通道违停监测报警', address:'真光新村第四小区36号消防通道',	state:'4',type:'智联'},
      {time: '2021/5/16',	text:'其他', address:'普陀区',	state:'8',type:'主动'},]

// const fromsData = [
//       { time: '2021/5/16 18:31',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:31',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:31',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:30',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:30',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:29',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:29',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:29',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:28',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:28',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:28',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄10号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:27',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:27',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:26',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:26',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:26',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:25',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:25',	text:'垃圾外溢', address:'怒江路 30弄42号 星风花苑',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:25',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:25',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:24',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:24',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:23',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:23',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:23',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:22',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:22',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:21',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:21',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:21',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:20',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:20',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:20',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:19',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:17',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:17',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:16',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:15',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:15',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:13',	text:'垃圾外溢',address:'	怒江路 30弄6号 星风花苑',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:13',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:13',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:12',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:11',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:10',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:10',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:10',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:09',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:09',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:08',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:08',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:07',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:07',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:07',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:06',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄26号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:04',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄38号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:04',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄38号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:03',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:03',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:02',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:02',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:01',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:01',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:00',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 18:00',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄36号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:59',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:59',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:58',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:58',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:58',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:57',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄40号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:56',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:56',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:55',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:55',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:55',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:54',	text:'住宅小区里废弃非机动车辆', 	address:'黄陵路 200弄15号 新黄小区',	state:'11',type:'主动'},
//       { time: '2021/5/16 17:46',	text:'住宅小区登高面违停监测报警', address:'中星花苑640号登高位',	state:'	6',type:'智联'},
//       {time: '2021/5/16 17:19',	text:'住宅小区消防通道违停监测报警', address:'绿杉小区7号右旁消防通道',state:'6',type:'智联'},
//       {time: '2021/5/16 17:07',	text:'住宅小区消防通道违停监测报警', address:'绿洲湖畔花园3号消防通道',state:'6',type:'智联'}, 
//       {time: '2021/5/16 16:57',	text:'住宅楼道火灾烟雾监测报警', 	address:'镇坪路176弄8号楼14F-1',state:'6',type:'智联'},
//       {time: '2021/5/16 16:55',	text:'住宅小区登高面违停监测报警', address:'平江盛世家园1栋登高面',	state:'6',type:'智联'},
//       {time: '2021/5/16 16:44',	text:'其他', address:'普陀区真华路399弄',	state:'3',type:'被动'},
//       {time: '2021/5/16 16:43',	text:'住宅小区登高面违停监测报警', address:'象源丽都46#消防登高面',state:'4',type:'智联'},
//       {time: '2021/5/16 16:42',	text:'民防地下空间水浸监测报警', 	address:'旋丰小区车站新村39号楼-2',	state:'4',type:'智联'},
//       {time: '2021/5/16 16:42',	text:'群租治理', address:'普陀区竹柳路50弄锦竹苑13号',	state:'3',type:'被动'},
//       {time: '2021/5/16 16:36',	text:'民防地下空间水浸监测报警', 	address:'管弄路226弄03号B1F-3',state:'4',type:'智联'},
//       {time: '2021/5/16 16:36',	text:'民防地下空间水浸监测报警', 	address:'管弄路121弄01号B1F',state:'4',type:'智联'},
//       {time: '2021/5/16 16:34',	text:'住宅小区消防通道违停监测报警', address:'北石路174弄小区北石路105号左旁消防通道',state:'4',type:'智联'},
//       {time: '2021/5/16 16:32',	text:'入学入园', address:'普陀区白玉路98弄13号 江南名庐',	state:'8',type:'被动'},
//       {time: '2021/5/16 16:25',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
//       {time: '2021/5/16 16:24',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
//       {time: '2021/5/16 16:23',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
//       {time: '2021/5/16 16:23',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
//       {time: '2021/5/16 16:23',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
//       {time: '2021/5/16 16:23',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
//       {time: '2021/5/16 16:23',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'主动'},
//       {time: '2021/5/16 16:23',	text:'垃圾外溢', address:'23号 桂巷新村',	state:'11',type:'被动'},
//       {time: '2021/5/16 16:23',	text:'住宅小区消防通道违停监测报警', address:'真光新村第四小区36号消防通道',	state:'4',type:'智联'},
//       {time: '2021/5/16 16:23',	text:'其他', address:'普陀区',	state:'8',type:'主动'},]

    // menu 管理
    let menuitem = ref('chengshizhisheng');

    // 切换图标事件
    let selectMenu = (itemname) => {
      menuitem.value = itemname;

      // provide('itemname', itemname)
    }

    return {
      dataitems,
      fromsData: reactive(fromsData),
      selectMenu,
      menuitem
    }

  }
}
</script>
<style lang="less" scoped>
.modal-w {
  border-radius: 10px;
  width: 1000px;
  height: 600px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #011115;

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
}

.head {
  height: 80px;
  /*border-bottom: 1px dashed red;*/

  .headitem {
    width: 50%;
    height: 100%;
    float: left;
    padding-left: 20px;
    /*border: 1px dashed green;*/

    position: relative;

    .titleinfo {
      height: 40px;
      line-height: 40px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      // border: 1px solid red;

      .title {
        float: left;
        height: 36px;
        color: #fff;
        font-size: 36px;
      }
      .value {
        float: left;
        line-height: 28px;
        font-size: 28px;
        line-height: inherit;
        color: #13f2f1;
        margin-left: 28px;
      }

      .unit {
        float: left;
        line-height: 28px;
        font-size: 28px;
        line-height: inherit;
        color: #ccc;
        margin-left: 20px;
      }
    }
  }
}

.content {
  height: 520px;
  padding-top: 20px;
  padding-bottom: 20px;
  // border: 1px dashed green;

  .left {
    height: 100%;
    width: 50%;
    float: left;
    /*border: 1px dashed green;*/
    display: flex;

    .left-l {
      width: 100px;
      /*border: 1px dashed red;*/
      height: 100%;

      .iconcontent {
        width: 100%;
        height: 100%;
        // border: 1px solid red;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        .menuicon {
          height: 84px;
          width: 74px;
          // border: 1px dashed green;
          text-align: center;
          position: relative;
          padding-top: 10px;

          .base {
            width: 50px;
            height: 50px;
            position: absolute;

            left: 50%;
            transform: translate(-50%, 0);
          }

          .iconx {
            // width: 50px;
            // height: 50px;
            position: absolute;
            top: 34px;
            left: 50%;
            transform: translate(-50%, -12px);
          }

          .menuicontitle {
            font-size: 14px;
            font-weight: 600;
            /*#02f6ff*/
            color: #B5BFCC;
            position: absolute;
            bottom: 0;
            left: 10px;
          }
        }
      }
      .menuicon1 {
      }
    }
    .left-r {
      flex: 1;
      /*border: 1px dashed red;*/
      // padding-left: 20px;
      // padding-right: 20px;
    }
  }
  .right {
    height: 100%;
    width: 50%;
    float: left;
    /*border: 1px dashed green;*/
    /*border-left: 1px dashed #ccc;*/
    display: flex;
    flex-direction: column;

    .right-t {
      height: 168px;
      /*border: 1px dashed red;*/
    }

    .right-b {
      flex: 1;
      /*border: 1px dashed red;*/
      overflow: hidden;
    }
  }
}
</style>